<template>
    <div class="app-container">
        <div class="add-row-center-box">
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <el-form-item label="分类名称" prop="categoryName">
                    <el-input v-model="form.categoryName" size="small" placeholder="请输入分类名称"/>
                </el-form-item>
                <el-form-item label="分类排序（1~99值越大越靠前）" prop="orderNum">
                    <el-input v-model.number="form.orderNum" :maxlength="2" size="small" placeholder="请输入排序"/>
                </el-form-item>
                <el-form-item label="分类图片" prop="icon">
                    <ImageUpload v-model="form.icon" :limit="1" :file-size="0" :is-show-tip="false"/>
                </el-form-item>
                <el-form-item label="是否显示" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio label="0">是</el-radio>
                        <el-radio label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div class="footer">
                <el-button size="small" @click="cancel">取 消</el-button>
                <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
            </div>
        </div>
    </div>

</template>

<script>
import {handleEnum, responseEnum} from "../../../const/const";
import ImageUpload from "@/components/ImageUpload/"
import {IS_INTEGER} from "../../../utils/validate";
import Api from "./api";

export default {
    name: 'categoryAdd',
    components: {ImageUpload},
    data() {
        return {
            // 操作枚举
            handleEnum,
            IS_INTEGER,
            form: {
                parentId: 0,
                categoryName: null,
                orderNum: null,
                icon: '',
                status: 0
            },
            // 校验
            rules: {
                categoryName: [{required: true, message: '请输入名称'}],
                orderNum: [{required: true, pattern: IS_INTEGER, message: '请输入正整数'}],
                icon: [{required: false, message: '请上传图片'}]
            },
        }
    },
    mounted() {
    },
    methods: {
        /**
         * 提交表单
         */
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    const loading = this.$loading({lock: true});
                    const apiName = 'materialCategoryAdd';
                      let params={
                          categoryName:this.form.categoryName,
                          parentId:this.form.parentId,
                          orderNum:this.form.orderNum,
                          status:this.form.status,
                          icon:this.form.icon,
                      }
                    Api[apiName](params).then(res => {
                        if (res.code === responseEnum.success) {
                            this.$message.success('新增成功');
                            this.$tab.closeOpenPage();
                            this.$router.replace({path: '/material/category'});
                        } else {
                            this.$message.error(res.msg);
                        }

                    }).finally(() => loading.close())
                }
            })
        },

        /*取消、关闭*/
        cancel() {
            this.$tab.closeOpenPage();
            this.$router.back();
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
